<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="interval">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Bar Stack Plot</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const data = [
    { value: -3.7, opinion: 'Disagree', group: 'All Survey Responses', type: 'All Survey Responses' },
    { value: -0.7, opinion: 'Strongly Disagree', group: 'All Survey Responses', type: 'All Survey Responses' },
    { value: 4.8, opinion: 'No Opinion', group: 'All Survey Responses', type: 'All Survey Responses' },
    { value: 40.7, opinion: 'Agree', group: 'All Survey Responses', type: 'All Survey Responses' },
    { value: 50.1, opinion: 'Strongly Agree', group: 'All Survey Responses', type: 'All Survey Responses' },
    { value: -2, opinion: 'Disagree', group: 'Employment sector', type: 'Academic(nonstudent)' },
    { value: 0, opinion: 'Strongly Disagree', group: 'Employment sector', type: 'Academic(nonstudent)' },
    { value: 3.2, opinion: 'No Opinion', group: 'Employment sector', type: 'Academic(nonstudent)' },
    { value: 30.8, opinion: 'Agree', group: 'Employment sector', type: 'Academic(nonstudent)' },
    { value: 64, opinion: 'Strongly Agree', group: 'Employment sector', type: 'Academic(nonstudent)' },
    { value: -6.3, opinion: 'Disagree', group: 'Employment sector', type: 'Business and industry' },
    { value: 0, opinion: 'Strongly Disagree', group: 'Employment sector', type: 'Business and industry' },
    { value: 2.8, opinion: 'No Opinion', group: 'Employment sector', type: 'Business and industry' },
    { value: 50, opinion: 'Agree', group: 'Employment sector', type: 'Business and industry' },
    { value: 40.6, opinion: 'Strongly Agree', group: 'Employment sector', type: 'Business and industry' },
    { value: -4.2, opinion: 'Disagree', group: 'Employment sector', type: 'Federal, state, and local government' },
    { value: -2.8, opinion: 'Strongly Disagree', group: 'Employment sector', type: 'Federal, state, and local government' },
    { value: 7, opinion: 'No Opinion', group: 'Employment sector', type: 'Federal, state, and local government' },
    { value: 47.9, opinion: 'Agree', group: 'Employment sector', type: 'Federal, state, and local government' },
    { value: 38, opinion: 'Strongly Agree', group: 'Employment sector', type: 'Federal, state, and local government' },
    { value: 0, opinion: 'Disagree', group: 'Employment sector', type: 'Private consultant/self-employed' },
    { value: 0, opinion: 'Strongly Disagree', group: 'Employment sector', type: 'Private consultant/self-employed' },
    { value: 7.1, opinion: 'No Opinion', group: 'Employment sector', type: 'Private consultant/self-employed' },
    { value: 53.6, opinion: 'Agree', group: 'Employment sector', type: 'Private consultant/self-employed' },
    { value: 39.3, opinion: 'Strongly Agree', group: 'Employment sector', type: 'Private consultant/self-employed' },
    { value: -2.8, opinion: 'Disagree', group: 'Race', type: 'White' },
    { value: -1, opinion: 'Strongly Disagree', group: 'Race', type: 'White' },
    { value: 4.5, opinion: 'No Opinion', group: 'Race', type: 'White' },
    { value: 41.8, opinion: 'Agree', group: 'Race', type: 'White' },
    { value: 50, opinion: 'Strongly Agree', group: 'Race', type: 'White' },
    { value: -3.3, opinion: 'Disagree', group: 'Race', type: 'Asian' },
    { value: 0, opinion: 'Strongly Disagree', group: 'Race', type: 'Asian' },
    { value: 3.3, opinion: 'No Opinion', group: 'Race', type: 'Asian' },
    { value: 40.2, opinion: 'Agree', group: 'Race', type: 'Asian' },
    { value: 53.3, opinion: 'Strongly Agree', group: 'Race', type: 'Asian' },
    { value: -10, opinion: 'Disagree', group: 'Race', type: 'Black or African American' },
    { value: 0, opinion: 'Strongly Disagree', group: 'Race', type: 'Black or African American' },
    { value: 20, opinion: 'No Opinion', group: 'Race', type: 'Black or African American' },
    { value: 30, opinion: 'Agree', group: 'Race', type: 'Black or African American' },
    { value: 40, opinion: 'Strongly Agree', group: 'Race', type: 'Black or African American' },
    { value: -11.8, opinion: 'Disagree', group: 'Race', type: 'Other' },
    { value: -0.7, opinion: 'Strongly Disagree', group: 'Race', type: 'Other' },
    { value: 5.9, opinion: 'No Opinion', group: 'Race', type: 'Other' },
    { value: 35.3, opinion: 'Agree', group: 'Race', type: 'Other' },
    { value: 47.1, opinion: 'Strongly Agree', group: 'Race', type: 'Other' },
    { value: -6.9, opinion: 'Disagree', group: 'Education', type: "Associate's and Bachelor's" },
    { value: -1.1, opinion: 'Strongly Disagree', group: 'Education', type: "Associate's and Bachelor's" },
    { value: 5.7, opinion: 'No Opinion', group: 'Education', type: "Associate's and Bachelor's" },
    { value: 49.1, opinion: 'Agree', group: 'Education', type: "Associate's and Bachelor's" },
    { value: 37.1, opinion: 'Strongly Agree', group: 'Education', type: "Associate's and Bachelor's" },
    { value: -2.3, opinion: 'Disagree', group: 'Education', type: "Master's and Above" },
    { value: -0.5, opinion: 'Strongly Disagree', group: 'Education', type: "Master's and Above" },
    { value: 4.4, opinion: 'No Opinion', group: 'Education', type: "Master's and Above" },
    { value: 36.9, opinion: 'Agree', group: 'Education', type: "Master's and Above" },
    { value: 55.9, opinion: 'Strongly Agree', group: 'Education', type: "Master's and Above" },
    { value: -3.4, opinion: 'Disagree', group: 'Gender', type: 'Male' },
    { value: -0.8, opinion: 'Strongly Disagree', group: 'Gender', type: 'Male' },
    { value: 4.2, opinion: 'No Opinion', group: 'Gender', type: 'Male' },
    { value: 41, opinion: 'Agree', group: 'Gender', type: 'Male' },
    { value: 50.6, opinion: 'Strongly Agree', group: 'Gender', type: 'Male' },
    { value: -3.5, opinion: 'Disagree', group: 'Gender', type: 'Female' },
    { value: -0.5, opinion: 'Strongly Disagree', group: 'Gender', type: 'Female' },
    { value: 6, opinion: 'No Opinion', group: 'Gender', type: 'Female' },
    { value: 39, opinion: 'Agree', group: 'Gender', type: 'Female' },
    { value: 51, opinion: 'Strongly Agree', group: 'Gender', type: 'Female' }
];
    const colorMap = {
      'Strongly Agree': '#3561A7',
      Agree: '#80B2D3',
      'No Opinion': '#D9F0F6',
      Disagree: '#EC7743',
      'Strongly Disagree': '#CB2920'
    };

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: [ 30, 30, 50, 220 ]
    });
    chart.source(data, {
      value: {
        tickInterval: 10
      }
    });
    chart.axis('type', {
      title: null,
      label: {
        offset: 10,
        rotate: 90,
        autoRotate: false,
        textStyle: {
          textAlign: 'end'
        }
      }
    });
    chart.legend({
      position: 'top'
    });
    chart.tooltip({
      shared: false
    });
    chart.coord().transpose();
    chart.intervalStack()
      .position('type*value')
      .color('opinion', function(opinion) {
        return colorMap[opinion];
      });
    chart.render();
  </script>
</body>

</html>
